﻿
@{
    ViewBag.Title = "创建工单";
    Layout = "~/Views/Shared/_LayoutPage.cshtml";
    var workshops = ViewBag.Workshops as List<IOA.MES.DataAccess.VModel.VWorkshop>;
}
@model IOA.MES.DataAccess.VModel.VWorkOrder

@section Contents{
    <style>
        .layui-form-item .layui-inline {
            margin-right: 0;
        }
    </style>
}

<div id="page"></div>

<script type="text/template" id="tplPage">
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-form layui-row layui-card-body">
                <div class="layui-form-item">
                    <div class="layui-inline layui-col-xs4">
                        <label class="layui-form-label"><span style="color:red;">*</span>{{lang.Field.WorkShop}}：</label>
                        <div class="layui-input-inline">
                            <select id="selWorkshops" name="WorkshopCode" lay-verify="required" lay-filter="workshopCode" @(Model == null ? "" : " disabled")>
                                <option value="" @(Model == null ? " selected" : "")>请选择</option>
                                @foreach (var item in workshops)
                                {
                                    <option value="@item.WorkshopCode" @(Model != null && string.Equals(Model.WorkshopCode, item.WorkshopCode, StringComparison.CurrentCultureIgnoreCase) ? " selected" : "")>@item.WorkshopName</option>
                                }
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline layui-col-xs4">
                        <label class="layui-form-label"><span style="color:red;">*</span>{{lang.Field.OrderNo}}：</label>
                        <div class="layui-input-inline">
                            <input type="text" name="OrderNo" value="@(Model?.OrderNo??string.Empty)" @(Model == null ? "" : " disabled") lay-verify="required" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline layui-col-xs4">
                        <label class="layui-form-label"><span style="color:red;">*</span>{{lang.Field.WorkorderNo}}：</label>
                        <div class="layui-input-inline">
                            <input type="text" name="WorkOrderNo" value="@(Model?.WorkOrderNo??string.Empty)" @(Model == null ? "" : " disabled") lay-verify="required" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline layui-col-xs4">
                        <label class="layui-form-label"><span style="color:red;">*</span>{{lang.Field.WorkorderDate}}：</label>
                        <div class="layui-input-inline">
                            <input type="text" id="txtRangeDate" name="RangeDate" value="@(Model==null?"":Model.StartDate.Value.ToString("yyyy-MM-dd")+" 至 "+Model.EndDate.Value.ToString("yyyy-MM-dd"))" lay-verify="required" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline layui-col-xs4">
                        <label class="layui-form-label">{{lang.Field.ProjectName}}：</label>
                        <div class="layui-input-inline">
                            <input type="text" name="ProjectName" value="@(Model?.ProjectName??string.Empty)" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline layui-col-xs4">
                        <label class="layui-form-label">{{lang.Field.ContractNo}}：</label>
                        <div class="layui-input-inline">
                            <input type="text" name="ContractNo" value="@(Model?.ContractNo??string.Empty)" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline layui-col-xs4">
                        <label class="layui-form-label">{{lang.Field.ProtocolNo}}：</label>
                        <div class="layui-input-inline">
                            <input type="text" name="ProtocolNo" value="@(Model?.ProtocolNo??string.Empty)" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline layui-col-xs4">
                        <label class="layui-form-label">{{lang.Field.AssistUnitCode}}：</label>
                        <div class="layui-input-inline">
                            <input type="text" name="AssistUnitCode" value="@(Model?.AssistUnitCode??string.Empty)" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline layui-col-xs4">
                        <label class="layui-form-label"><span style="color:red;">*</span>{{lang.Field.ProductCode}}：</label>
                        <div class="layui-input-inline">
                            <input type="text" name="ProductCode" value="@(Model?.ProductCode??string.Empty)" lay-verify="required" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline layui-col-xs4">
                        <label class="layui-form-label"><span style="color:red;">*</span>{{lang.Field.Count}}：</label>
                        <div class="layui-input-inline">
                            <input type="number" name="Count" value="@(Model?.Count??0)" lay-verify="validNum" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline layui-col-xs4" style="padding-top: 9px;">
                        <button class="layui-btn layuiadmin-btn-list" type="button" lay-filter="submit" lay-submit>
                            <i class="layui-icon layui-icon-ok layuiadmin-button-btn"></i>{{lang.Field.Submit}}
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="addBomForm" style="height:auto;padding-top:15px;">
                <div class="layui-row">
                    <div class="layui-inline layui-col-xs4">
                        <label class="layui-form-label"><span style="color:red;">*</span>{{lang.Field.BomCode}}：</label>
                        <div class="layui-input-inline">
                            <input type="text" name="bomCode" lay-verify="required" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline layui-col-xs4">
                        <label class="layui-form-label"><span style="color:red;">*</span>{{lang.Field.BomCount}}：</label>
                        <div class="layui-input-inline">
                            <input type="number" name="bomCount" lay-verify="validNum" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline layui-col-xs4">
                        <label class="layui-form-label"><span style="color:red;">*</span>{{lang.Field.SingleCount}}：</label>
                        <div class="layui-input-inline">
                            <input type="number" name="singleCount" lay-verify="validNum" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-inline layui-col-xs4">
                        <label class="layui-form-label">{{lang.Field.Company}}：</label>
                        <div class="layui-input-inline">
                            <input type="text" name="productCompany" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline layui-col-xs3" style="padding-top:9px;">
                        <button class="layui-btn layuiadmin-btn-list" type="button" lay-filter="addBom" lay-submit>
                            <i class="layui-icon layui-icon-addition layuiadmin-button-btn"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="layui-card-body">
                <table id="table" lay-filter="table"></table>
            </div>
        </div>
    </div>
</script>

@section Scripts{
    <script>
        var data = @(Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model?.Boms??new List<IOA.MES.DataAccess.VModel.VWorkOrderBom>())));
        var vm = new Vue({
            el: "#page",
            template: "#tplPage",
            data: {
                lang: JSON.parse(lang).package
            }
        });

        setTimeout(function () {
            initLayui();
        }, 50);
        function initLayui() {
            layui.use(['table', 'layer', 'form', 'laydate'], function () {
                var layer = layui.layer,
                    table = layui.table,
                    form = layui.form,
                    laydate = layui.laydate;
                laydate.render({
                    elem: '#txtRangeDate'
                    , range: '至'
                });
                var options = {
                    elem: '#table'
                    , page: {
                        limit: 1000
                        , limits: [15, 20, 25, 30, 40, 50]
                    }
                    , data: data
                    , cols: [[
                        { title: '序号', type: "numbers", width: 60 }
                        , { field: 'ProductCode', title: '料号', width: 150 }
                        , { field: 'ProductName', title: '名称', minWidth: 150 }
                        , { field: 'ProductCompany', title: '厂家', width: 150 }
                        , { field: 'Count', title: '数量', width: 100 }
                        , { field: 'SingleCount', title: '单块用量', width: 100 }
                        , {
                            title: '操作', width: 100, fixed: "right", templet: function (d) {
                                return '<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delBom"><i class="layui-icon">&#xe640;</i>删除</button>';
                            }
                        }
                    ]]
                };

                table.render(options);
                table.on('tool(table)', function (obj) {
                    if (obj.event === 'delBom') {
                        for (var i = 0; i < options.data.length; i++) {
                            if (options.data[i].ProductCode == obj.data.ProductCode) {
                                options.data.splice(i, 1);
                                table.reload("table", options);
                                break;
                            }
                        }
                    }
                });


                $("input[name=bomCode], input[name=bomCount], input[name=singleCount], input[name=productCompany]").keyup(function (e) {
                    if (e.keyCode != 13) {
                        return;
                    }
                    if ($(this).attr("id") == "txtBomCode") {
                        $("#txtBomCount").focus();
                    } else if ($(this).attr("id") == "txtBomCount") {
                        $("#txtSingleCount").focus();
                    }
                    form.submit('addBomForm', function (formData) {
                        addBom(formData.field);
                    });
                });
                form.on('submit(addBom)', function (formData) {
                    addBom(formData.field);
                });
                function addBom(form) {
                    console.log(form);
                    var existCode = options.data.find(function (event) {
                        return event.ProductCode == form.bomCode && event.ProductCompany == form.productCompany;
                    });
                    if (existCode) {
                        return layer.msg("该物料已被添加过：" + form.bomCode, { icon: 5 });
                    }

                    var loadId = layer.load();
                    $.ajax({
                        url: "/Common/GetProduct",
                        data: {
                            productCode: form.bomCode
                        },
                        complete: function () {
                            layer.close(loadId);
                        },
                        error: function () {
                            layer.msg("网络错误", { icon: 5 });
                        },
                        success: function (res) {
                            if (res.ErrCode != 200) {
                                return layer.msg(res.ErrMsg, { icon: 5 });
                            } else if (res.Data == null) {
                                return layer.msg("物料不存在：" + form.bomCode, { icon: 5 });
                            }
                            res.Data.Count = form.bomCount;
                            res.Data.SingleCount = form.singleCount;
                            res.Data.ProductCompany = form.productCompany;
                            options.data.splice(0, 0, res.Data);
                            renderTable();
                        }
                    });
                }

                function renderTable() {
                    $("input[name=bomCode]").val("");
                    $("input[name=bomCount]").val("");
                    $("input[name=singleCount]").val("");
                    $("input[name=productCompany]").val("");
                    $("input[name=bomCode]").focus();
                    table.reload("table", options);
                }

                form.on('submit(submit)', function (formData) {
                    var forms = formData.field;
                    forms.StartDate = forms.RangeDate.split('至')[0].trim();
                    forms.EndDate = forms.RangeDate.split('至')[1].trim();

                    forms.Boms = options.data;
                    if (forms.Boms.length <= 0) {
                        layer.confirm('您尚未添加BOM，确定保存工单吗？', { icon: 3, title: '提示' }, function (index) {
                            submit(forms);
                            layer.close(index);
                        });
                    } else {
                        submit(forms);
                    }
                });

                function submit(forms) {
                    var loadId = layer.load();
                    $.ajax({
                        url: "/Plan/CreateWorkOrder",
                        data: {
                            workOrder: forms
                        },
                        complete: function () {
                            layer.close(loadId);
                        },
                        error: function () {
                            layer.msg("网络错误", { icon: 5 });
                        },
                        success: function (res) {
                            if (res.ErrCode != 200) {
                                return layer.msg(res.ErrMsg, { icon: 5 });
                            }
                            window.parent.layui.layer.msg("工单保存成功！", { icon: 6 });
                            location.reload();
                        }
                    });
                }
            });
        }
    </script>
}
